<!-- 所有资源列表 -->
<template>
  <div>
    <h2 class="nav-title">所有资源</h2>
    <div class="nav-list">
      <div class="nav-item add-button" @click="$router.push('/replan')">
        <i class="el-icon-house add-icon"></i>
        <p>前往首页</p>
      </div>
      <div
        class="nav-item nav-btn"
        v-for="item in displayList"
        :key="item.id"
        @click="toLoginAccount(item.nav_link, item.nav_id)"
      >
        <div class="nav-item-content">
          <el-image
            class="nav-item-icon"
            :src="item.nav_image"
            style="width: 36px; height: 36px"
          ></el-image>
          <h3>{{ item.nav_title }}</h3>
        </div>
        <p>{{ item.nav_describe }}</p>
      </div>
      <div class="nav-item add-button" @click="handle_add_link">
        <i class="el-icon-circle-plus-outline add-icon"></i>
        <p>添加资源</p>
      </div>
      <NewLink
        v-if="showAddLink"
        :visible.sync="showAddLink"
        @update:visible="onUpdateVisible"
        @link-created="fetchData"
      ></NewLink>
      <MultiSiteLoginModal
        :showAccount.sync="showAccount"
        :loginAccount="this.to_link"
        :navId="navId"
      />
    </div>
  </div>
</template>

<script>
import openLogo from "@/assets/openLogo.png";
import iconBook from "@/assets/logo.png";
import NewLink from "@/views/home/homePage/NewLink.vue";
import MultiSiteLoginModal from "@/views/home/homePage/components/MultiSiteLoginModal.vue";
import { get_link_list } from "@/api/home/nav";
import { get_select_category_data } from "@/api/home/nav";

export default {
  name: "NavigationList",
  components: {
    NewLink,
    MultiSiteLoginModal,
  },
  props: {
    current_category_id: {
      type: Number,
    },
    search_props: {
      type: String,
    },
    category_id: {
      type: Number,
    },
    search_title: {
      type: String,
    },
  },
  data() {
    return {
      iconBook,
      navItem: [], // 这个是我自己请求拿的数据，不是父组件传过来的
      showAddLink: false,
      displayList: [],
      showAccount: false,
      to_link: "",
      navId: null,
      account: [
        {
          id: 1,
          nav_title: "open-t",
          nav_describe: "开放平台测试服",
          nav_image: openLogo,
          nav_link: "http://open-t.handyprint.cn/admin",
        },
        {
          id: 2,
          nav_title: "open",
          nav_describe: "开放平台正式服",
          nav_image: openLogo,
          nav_link: "http://open.handyprint.cn/admin",
        },
        {
          id: 3,
          nav_title: "V3-t",
          nav_describe: "V3后台测试服",
          nav_image: openLogo,
          nav_link: "https://v2-t.handyprint.cn/admin",
        },
        {
          id: 4,
          nav_title: "V3",
          nav_describe: "v3后台正式服",
          nav_image: openLogo,
          nav_link: "https://v2.handyprint.cn/admin_v3/dashboard",
        },
        {
          id: 5,
          nav_title: "partner",
          nav_describe: "合伙人后台",
          nav_image: openLogo,
          nav_link: "https://partner.handyprint.cn/admin",
        },
        {
          id: 6,
          nav_title: "友邦",
          nav_describe: "开放平台测试服",
          nav_image: openLogo,
          nav_link:
            "http://yb.uat.sunyur.com/purchaser/#/member/login?url=%2F%2Fyb.uat.sunyur.com&isMall=true",
        },
        {
          id: 7,
          nav_title: "友邦供应商",
          nav_describe: "友邦测试服供应商",
          nav_image: openLogo,
          nav_link:
            "https://aia-t.handyprint.cn/login?redirect=%2Fvendor%2Fprepares",
        },
        {
          id: 8,
          nav_title: "随心定制",
          nav_describe: "随心定制正式服",
          nav_image: openLogo,
          nav_link: "https://sxy.handyprint.cn/admin",
        },
      ],
    };
  },
  watch: {
    async category_id(id) {
      const res = await get_select_category_data(id);
      this.displayList = res.data;
      console.log("看看我是啥", res.data);
    },
    async search_title(title) {
      const res = await get_select_category_data("", title);
      this.displayList = res.data;
      console.log("看看我是啥2", res.data);
    },
  },
  async created() {
    const res = await get_link_list(); // 调用函数并等待结果
    this.displayList = res.data;
  },

  methods: {
    to_link_page(link) {
      window.open(link);
    },
    handle_add_link() {
      this.showAddLink = true;
    },
    onUpdateVisible(val) {
      // 你也可以直接赋值，这样也能保证父组件数据同步
      this.showAddLink = val;
    },
    async fetchData() {
      console.log("是否有收到值");
      const res = await get_link_list();
      this.displayList = res.data;
    },
    toLoginAccount(link, nav_id) {
      this.to_link = link;
      this.navId = nav_id;
      console.log("父组件传了没", nav_id);
      this.showAccount = true;
    },
  },
};
</script>

<style lang="scss">
.nav-title {
  margin-bottom: 20px;
}
.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  .add-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #409eff;
    border: 2px dashed #dcdfe6;
    transition: all 0.3s ease;
    .add-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }
    p {
      font-size: 16px;
      color: #606266;
      margin: 0;
    }
    &:hover {
      background-color: #f0f9ff;
      border-color: #409eff;
    }
  }
  .nav-item {
    cursor: pointer;
    width: 286px;
    height: 186px;
    padding: 24px;
    border: 1px solid #e4e7eb;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    .nav-item-content {
      display: flex;
      margin-bottom: 16px;
      align-items: center;
      .nav-item-icon {
        margin-right: 16px;
      }
    }
    p {
      font-size: 1rem;
    }
  }
}

.nav-btn {
  color: #409eff;
  border: 2px dashed #dcdfe6;
  transition: all 0.3s ease;
  p {
    font-size: 16px;
    color: #606266;
    margin: 0;
  }
  &:hover {
    background-color: #f0f9ff;
    border-color: #409eff;
  }
}
</style>
